import { useState } from "react";
import { Icon } from "@iconify-icon/react";
import styles from "./styles.module.less";
import type { MenuProps } from "antd";
import { Button, Menu, Avatar, Typography, Tag, message } from "antd";
import { useNavigate } from "react-router-dom";
// import { sideList } from "@/constant/side";
import { useMainStore, changeSideTab } from "@/store/mainStore";
import { useShallow } from "zustand/react/shallow";
import { ServerLogout } from "@go/app/ServerApp";
import { getMenuAuth, isVip } from "@/utils/utils";

type MenuItem = Required<MenuProps>["items"][number];

const SideBar = () => {
  const navigate = useNavigate();

  const { sideList, sideTab, isLogin, token, userInfo } = useMainStore(
    useShallow((state) => ({
      sideList: state.sideList,
      sideTab: state.sideTab,
      isLogin: state.isLogin,
      token: state.token,
      userInfo: state.userInfo,
    }))
  );

  // 菜单列表
  const menuList: MenuItem[] = sideList.map((item) => ({
    ...item,
    icon: <Icon icon={item.icon} />,
    // disabled: !getMenuAuth(userInfo.vip_info || {}, item.level, isLogin),
  }));

  const menuClick: MenuProps["onClick"] = (e) => {
    changeSideTab(e.key);
    navigate(e.key);
  };

  const login = () => {
    navigate("/login");
  };

  return (
    <div className={styles.sideBar}>
      <div className={styles.userInfo}>
        {isLogin ? (
          <div className={styles.logging}>
            <Avatar
              size={90}
              icon={<Icon icon="uil:user" />}
              src={userInfo.avatar}
            />
            <div className={styles.loginBtn}>
              <Button type="link" size="small">
                个人中心
              </Button>
            </div>
          </div>
        ) : (
          <div className={styles.notLogin}>
            <Avatar size={90} icon={<Icon icon="uil:user" />} />
            <div className={styles.loginBtn}>
              <Button type="link" size="small" onClick={login}>
                立即登录
              </Button>
            </div>
          </div>
        )}
        <div
          className={styles.userName}
          style={{
            display: isLogin ? "block" : "none",
          }}
        >
          <Typography.Text
            style={{ width: 120 }}
            ellipsis={{
              tooltip: {
                title: userInfo.nickname,
                color: "gold",
              },
            }}
          >
            {userInfo.nickname}
          </Typography.Text>
        </div>
        <div
          className={styles.vipIcon}
          style={{
            display:
              isLogin && isVip(userInfo.vip_info || {}) ? "block" : "none",
          }}
        >
          <Icon icon="icon-park:vip-one" width={20} />
          <span>{`vip${userInfo.vip_info?.level}`}</span>
        </div>
      </div>
      <div className={styles.menuBox}>
        <Menu
          theme="light"
          onClick={menuClick}
          selectedKeys={[sideTab]}
          mode="vertical"
          items={menuList}
          // disabled={!isLogin}
        />
      </div>
      <div className={styles.stateTransition}>
        {isLogin ? (
          <Button
            className={styles.logout}
            color="danger"
            variant="link"
            onClick={() => {
              useMainStore.setState({ isLogin: false, token: "" });
              ServerLogout(token);
              message.info("已退出登录");
            }}
          >
            <Icon icon="bitcoin-icons:exit-filled" />
            退出登录
          </Button>
        ) : (
          <Button
            className={styles.logging}
            color="primary"
            variant="text"
            onMouseEnter={(e) => {
              e.currentTarget.querySelector("span")!.textContent = "立即登录";
            }}
            onMouseLeave={(e) => {
              e.currentTarget.querySelector("span")!.textContent = "未登录";
            }}
            onClick={login}
          >
            未登录
          </Button>
        )}
      </div>
    </div>
  );
};

export default SideBar;
